<!DOCTYPE html>
<html>
<head>
	<title>06知识点汇总</title>
	<meta charset="utf-8">
	<style type="text/css">
		.father{
			width: 500px;
			height: 500px;
			background: red;
		}
		.son{
			width: 100px;
			height: 100px;
			background: green;
			/*设置盒子左外边距为auto，将盒子冲到右边*/
			margin-left: auto;
		}
		img{
			/*图片和文字垂直居中对齐*/
			vertical-align: middle;
		}
		.container,.div1,.div2,.div3{
			width: 300px;
			height: 300px;
		}
		.container{
			overflow: hidden;
		}
		.div1{
			background: red;
		}
		.div2{
			background: green;
		}
		.div3{
			background: pink;
		}
		.logo{
			width: 143px;
			height: 76px;
			background: url("/images/logo.png");
		}
		a{
			display: inline-block;;
			text-indent: -5000em;
		}
		.removeeg{
			width: 300px;
	 		height: 0;
	 		padding-bottom: 100px;
	 		overflow: hidden;
	 		background: red;
		}
	</style>
</head>
<body>
	<!-- 06 标签包含规范 -->
	<span>
		<div>JeversonJee is ur father was</div>
	</span>
	<!-- 07 规避脱标流 -->
	<div class="father">
		<div class="son"></div>
	</div>
	<!-- 08 图片和文字垂直居中对齐 -->
	<div class="box">
		<img src="images/1.png">JJ是你爸爸
	</div>
	<!-- 09 tab切换 -->
	<a href="#div1">div1</a>
	<a href="#div2">div2</a>
	<a href="#div3">div3</a>
	<div class="container">
		<div class="div1" id="div1"></div>
		<div class="div2" id="div2"></div>
		<div class="div3" id="div3"></div>
	</div>
	<!-- 10 内容移除 -->
	<div class="logo">
		<h1>
			<a href="#">搜狐</a>
		</h1>
	</div>
	<!-- 11 内容移除方式2 -->
	<div class="removeeg">JJWeb developer</div>
</body>
</html>